<template>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>用户名</td>
                    <td>
                        <input type="text" v-model="list.name" >
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" v-model="list.password">
                    </td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td>
                        <input type="password1" v-model="list.password1">
                    </td>
                </tr>
                <tr>
                    <td>请选择城市</td>
                    <td>
                       <select v-model="list.city">
                        <option value="">请选择城市</option>
                        <option :value="item.name" v-for="item in citys" :key="item.id">
                                <option value="">{{ item.name }}</option>
                        </option>
                       </select>
                    </td>
                </tr>
                <tr>
                    <td>请选择性别</td>
                    <td>
                        <input type="radio" name="sex" value="男" v-model="list.sex">男
                        <input type="radio" name="sex" value="女" v-model="list.sex">女
                        <input type="radio" name="sex" value="不好说" v-model="list.sex">不好说
                    </td>
                </tr>
                <tr>
                    <td>请选择职业</td>
                    <td>
                        <input type="radio" name="job" value="学生" v-model="list.job">学生
                        <input type="radio" name="job" value="教师" v-model="list.job">教师
                        <input type="radio" name="job" value="其他" v-model="list.job">其他
                    </td>
                </tr>
                <tr>
                    <td>请选择爱好</td>
                    <td>
                        <input type="checkbox" name="hobby" value="打篮球" v-model="list.hobby">打篮球
                        <input type="checkbox" name="hobby" value="跑步" v-model="list.hobby">跑步
                        <input type="checkbox" name="hobby" value="阅读" v-model="list.hobby">阅读
                        <input type="checkbox" name="hobby" value="上网" v-model="list.hobby"> 上网
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>
                       <textarea cols="50" rows="5" v-model="list.desc"></textarea>
                    </td>
                </tr>
                <tr>
                   
                    <td>
                      <input type="button" value="提交" class="btn btn-primary" @click="add">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive}from 'vue'

let citys=ref([
    {id:1,name:'北京市'},
    {id:2,name:'山西省'},
    {id:3,name:'甘肃省'},
])


 let list=reactive({
        name:'',
        password:'',
        password1:'',
        city:'',
        sex:'男',
        job:'',
        hobby:[],
        desc:'',

 })

 const add=()=>{
    console.log(list)
 }

</script>

<style scoped>

</style>